<template>
  <div class="order-detail">
    <mt-header :title="title">
      <router-link to="/order/item3/3" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="info-wrapper">
      <div class="yh">
        <h1>{{orderInfo.system_order_no}}</h1>
      </div>
      <div class="od-goods">
        <h1>商品</h1>
        <div class="beiz" v-if="orderInfo.description!=''">
              <p><span>备注：</span>{{orderInfo.description}}</p>
            </div>
        <ul class="od-goods-ul">
          <li v-for="goods in goodslist">
            <p class="g-title">{{goods.goods_name}}</p>
            <p class="g-num">{{goods.total_num}}</p>
            <p class="g-money">￥{{goods.total_fee}}</p>
          </li>
        </ul>
        <div class="z-money">
          <h1>总金额</h1>
          <span>￥{{orderInfo.total_fee}}</span>
        </div>
      </div>
    </div>
    <div class="d-ren">
        <p>送货员名字：{{orderInfo.deliver_name}}</p>
        <p>送货员电话：<a @click="call(orderInfo.deliver_phone)">{{orderInfo.deliver_phone}}</a></p>
    </div>
    <div class="d-ren">
        <p>收货人姓名：{{orderInfo.receiver_name}}</p>
        <p>收货人电话：<a @click="call(orderInfo.receiver_phone)">{{orderInfo.receiver_phone}}</a></p>
        <p>收货人地址：{{orderInfo.receiver_address}}</p>
    </div>
  </div>
</template>
<script>
import selected from 'components/common/selected.vue'
import uploadImg from 'components/common/uploadImg.vue'
import axios from 'axios'
import mySearch from 'components/common/mySearch.vue'
export default {
  data() {
      return {
        goodslist:[],
        orderInfo : '',
        title:'',
        orderid : ''
      }
    },
    mounted() {
      this.orderid = this.$route.params.id
      //if(this.goodsid != 0){
        this.title = "订单详情"
        let token = localStorage.getItem("access_token");
        let params = {"access_token": token,"order_no" : this.orderid}
        axios.post(HOST + "/Shop/order_detail",params).then((res) => {
          res = res.data
          let result = res.result
          if(result == 'success'){
            for(let item of res.data.good_list){
              this.goodslist.push(item)
            }
            this.orderInfo = res.data.order_info
          }
        })
      //}
    },
    methods: {
      call(phone){
        window.location.href = 'tel:' + phone
      }
      
    },
    components:{

    }
}
</script>

<style lang="stylus">
.order-detail
  background:#f2f2f2
  height:100%
  width:100%
  position:absolute
  top:0
  left:0
  z-index:10
  .mint-header
    color:rgb(104, 104, 104)
    background:#fff
    border-bottom:1px solid #ccc
    font-size:18px
    letter-spacing:2px
    box-shadow: 1px 3px 5px #eee;
    label,span
      color:#26a2ff
  .d-ren
    background:#fff
    padding:20px
    margin-top:20px
    p
      line-height:20px
      font-size:15px
      color:#333
      line-height: 30px;
      border-bottom: 1px dashed #f1f1f1;
  .info-wrapper
    margin-bottom:10px
    background:white
    .yh
      display:flex
      border-bottom:1px solid #eee
      padding:10px 20px
      h1
        flex:1
        font-size:18px
        span
          font-size:10px
          padding:2px
          background:#ffc107
          color:#fff
          margin-left:5px
          border-radius:5px
      span
        flex:0 0 30px
        text-align:center
        font-size:20px
    .od-goods
      padding:20px
      h1
        color:#333
      .beiz
        background:#eee
        margin-top:10px
        padding:10px
        p
          font-size:12px
          margin-top:5px
          span
            color:#ffc107
      .od-goods-ul
        padding:10px 0
        li
          display:flex
          margin-bottom: 5px
          text-align:right
          color:#666
          p
            font-size:14px
          .g-title
            flex:1
            text-align:left
            font-size:13px
          .g-num
            flex:0 0 50px
          .g-money
            flex:0 0 70px
      .z-money
        padding-bottom:10px
        h1
          font-weight:normal
          float:left              
        span
          color:#ffc107
          float:right
      .g-btn
        clear:both
        margin-top:15px
        display:flex
        .btn-ju,.btn-jie
          height:35px
        .btn-ju
          flex:0 0 30%
        .btn-jie
          margin-left:10px
          flex:1

</style>